<template>
  <div class="e-wrap">
    <w-button @on-click="onToInfo('')" v-if="!list || list.length == 0">新增运费模板</w-button>
    <div class="e-list" v-else>
      <!-- 测试模板 -->
      <table style="position: relative;top: -46px;">
        <tr style='visibility: hidden;'>
          <th width='10%'></th>
          <th width='60%'></th>
          <th colspan="4"></th>
        </tr>
        <tr class="table-h ">
          <th colspan="2" style="text-align: left;padding-left: 15px;">{{list.trans_name}}</th>
          <th colspan="4">
            <div class="tab-right">
              <!-- <em style="margin-right:10px;">
                <w-radio name='default' :label='0'>默认模板</w-radio>
              </em> -->
              <span class="cur" @click="onToInfo(list.id)">编辑 |</span>
              <span class="cur" @click="onDel(list.id)">删除</span>
            </div>
          </th>
        </tr>
        <tr>
          <td>运送方式</td>
          <td>运送到</td>
          <td>首件(个)</td>
          <td>运费(元)</td>
          <td>续件(个)</td>
          <td>运费(元)</td>
        </tr>
        <tr v-for="(item, listIndex) in info" :key="listIndex">
          <td>
            <span v-if="list.trans_ems">EMS</span>
            <span v-if="list.trans_express">快递</span>
            <span v-if="list.trans_mail">平邮</span>
          </td>
          <td width="54%">
            <span>{{item.city_name}}</span>
          </td>
          <td>
            {{item.trans_weight}}
          </td>
          <td class="price">
            {{item.trans_fee}}
          </td>
          <td>
            {{item.trans_add_weight}}
          </td>
          <td class="price">
            {{item.trans_add_fee}}
          </td>
        </tr>
      </table>
    </div>

    <!-- 新增模板弹框 -->
    <w-panel-fixed-wrap v-model="addTemplate" :showClose='true' :panel-title="true" title="新增模板" :width="`500px`" :height="`520px`" :confirmText='`保存`'>
      <div class="template-panel">
        <div class="e-item">
          <span class="title"><em>*</em>模板名称</span>
          <div class="dis-block">
              <w-input :holder="`请填写`"></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title"><em>*</em>商品产地</span>
          <div class="dis-block">
              <w-area-picker></w-area-picker>
              <!-- <w-select></w-select> -->
          </div>
        </div>
        <div class="e-item" style="margin-bottm: 14px;">
          <span class="title">发货时间</span>
          <div class="dis-block">
              <w-select></w-select>
          </div>
          <i>设定宝贝发货时间，不仅可避免发货咨询与纠纷，还能促进成交</i>
        </div>
        <div class="e-item">
          <span class="title"><em>*</em>是否包邮</span>
          <div class="dis-block">
              <span><w-radio name='freight' :label='21'>自定义运费</w-radio></span>
              <w-radio name='freight' :label='22'>卖家承担运费</w-radio>
          </div>
        </div>
        <div class="e-item">
          <span class="title"><em>*</em>计价方式</span>
          <div class="dis-block">
              <span><w-radio name='price' :label='31'>按件数</w-radio></span>
              <w-radio name='price' :label='32'>按重量</w-radio>
          </div>
        </div>
        <!-- <div class="e-item">
          <span class="title"><em>*</em>设为默认模板</span>
          <div class="dis-block">
              <span><w-radio name='template' :label='41'>是</w-radio></span>
              <w-radio name='template' :label='42'>否</w-radio>
          </div>
        </div> -->
        <div class="e-item">
          <span class="title">运送方式</span>
          <div class="dis-block">
              <span class="transport-box">
                <w-radio name='transport' :label='51'>快递</w-radio>
              </span>
              <span class="transport-box">
                <w-radio name='transport' :label='52'>EMS</w-radio>
              </span>
              <w-radio name='transport' :label='53'>平邮</w-radio>
          </div>
          <i>除指定地区外，其他地区的运费采用“默认运费”</i>
        </div>
      </div>
    </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { apiDeliveryMange } from 'js/api'

export default {
  data() {
    return {
      addTemplate: false,
      list: [],
      info: []
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.fetchDeliveryList()
  },
  methods: {
    /**
     * 获取运费列表
     */
    fetchDeliveryList() {
      this.list = []
      apiDeliveryMange.apiDeliveryList(this.token, this.$route.query.three).then(data => {
        this.list = data.data || []
        this.info = JSON.parse(this.list.trans_mail_info || this.list.trans_express_info || this.list.trans_ems_info || '[]')
      })
    },
    /**
     * 删除
     */
    onDel(id) {
      let _this = this
      const ids = []
      ids.push(id)
      this.$modal({
        content: '确认删除？',
        onConfirm() {
          apiDeliveryMange.apiDeliveryDel(_this.token, ids, _this.$route.query.three).then(data => {
            _this.fetchDeliveryList()
          })
        }
      })
    },
    /**
     * 新增/修改
     */
    onToInfo(id) {
      if (id) {
        this.$router.push(`info?three=${this.$route.query.three}&freightid=${id}`)
      } else {
        this.$router.push(`info?three=${this.$route.query.three}`)
      }
    }
  }
}
</script>

<style lang='scss'>
.btn {
  width: 120px;
}
</style>


<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-wrap {
  .e-list {
    table {
      margin-top: 20px;
    }
    .tab-right {
      font-weight: normal;
      text-align: right;
      margin-right: 36px;
    }
  }
  .price {
    color: $color-main;
  }
}
.template-panel {
  width: 396px;
  .e-item {
    display: block;
    margin-bottom: 20px;
    margin-left: 0;
    em,i {
      color: $color-main;
    }
    i {
      font-size: 10px;
      display: block;
      text-align: right;
      margin-top: 7px;
    }
    .title {
      width: 96px;
      font-size: 14px;
    }
    .dis-block {
      width: 284px;
      span {
        display: inline-block;
        width: 135px;
      }
      .transport-box {
        display: inline-block;
        width: 70px;
        margin-right: 35px;
      }
    }
  }
}
</style>